<script setup>
import { ref, onMounted, defineAsyncComponent } from 'vue';
// 懒加载组件以优化初始加载性能
const CompanySection = defineAsyncComponent(() => import('./components/sections/CompanySection.vue'));
import { fetchSettledCompanies, transformCompanyData } from './api/company.js';

// 页面加载状态
const pageLoaded = ref(false);

// 数据加载状态
const loading = ref(true);
const error = ref(null);
const companies = ref([]);

// 加载公司数据
const loadCompanies = async () => {
  try {
    loading.value = true;
    error.value = null;
    
    const data = await fetchSettledCompanies();
    
    // 转换数据格式
    companies.value = Array.isArray(data) 
      ? data.map(transformCompanyData)
      : [];
    
    console.log('成功加载公司数据:', companies.value.length, '家公司');
  } catch (err) {
    error.value = err.message || '加载公司数据失败';
    console.error('加载公司数据失败:', err);
  } finally {
    loading.value = false;
  }
};

// 处理企业卡片点击
const handleCardClick = (company) => {
  console.log('Selected company:', company);
};

// 处理重试
const handleRetry = () => {
  loadCompanies();
};

// 页面加载完成
onMounted(() => {
  // 加载公司数据
  loadCompanies();
  
  // 模拟页面加载延迟，确保资源加载完成
  setTimeout(() => {
    pageLoaded.value = true;
  }, 100);
});
</script>

<template>
  <div class="app" :class="{ 'app--loaded': pageLoaded }">
    <!-- 企业展示区域 -->
    <Transition name="fade" appear>
      <main id="main-content">
        <CompanySection 
          v-if="pageLoaded"
          :companies="companies"
          :loading="loading"
          :error="error"
          @card-click="handleCardClick"
          @retry="handleRetry"
        />
      </main>
    </Transition>
  </div>
</template>

<style scoped>
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.3s ease;
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #0a1628 0%, #0d1f3c 50%, #0a1628 100%);
}

.app--loaded {
  opacity: 1;
}

/* 淡入动画 */
.fade-enter-active {
  transition: opacity 0.6s ease;
}

.fade-enter-from {
  opacity: 0;
}
</style>
